<template>
  <div class="content-box">
    <e-heading class="title" grade="1">赛事签表 
      <small v-if="playRound>2" v-bind:class="{active:isSemifinal==false}" @click="isSemifinal = false">大签表</small> 
      <small 
        v-bind:class="{active:isSemifinal==true}"  @click="isSemifinal = true"
        v-if="playRound==7 || playRound==6 || playRound==5 || playRound==2" >
        半决赛
      </small>
    </e-heading>
    
    <template v-if="bigTableVisible && (isSemifinal == false)">
      <check-table
        :dataList="dataList"
        :roundList="roundList"
        :zoneNumber="zoneNumber"
        :areaIndex="areaIndex"
        :playRound="playRound"
        @active="handleActive">
      </check-table>
    </template>

    <template v-else>      
      <semifinal  
        :dataList="semiList"
        v-on:scoreWrite="openScore">
      </semifinal>        
    </template>

    <e-heading class="title" grade="1">赛程</e-heading>
      <!--赛程日期-->
      <date-slider v-model="activeDate" :list="dateList" @change="handleCheck"/>
       <div v-if="matchList.length">
          <!--赛程场地-->
          <place-group :list="matchList" v-model="selectedIndex" @change="handleSelect"/>
          <ul class="match-list small">
            <li v-for="(item,$index) in gameList" class="match-item  clearfix" 
                v-bind:class="{odd:$index%2==0}"
                :key="item.id">
                <el-row>
                  <el-col :span="4" class="match-date">
                    <p>{{new Date(item.startTime).format("yyyy-MM-dd hh:mm")}}</p>
                    <p v-if="item.grade == playRound">决赛</p>
                    <p v-else-if="playRound - item.grade == 1">半决赛</p>
                    <p v-else-if="playRound - item.grade == 2">1/4决赛</p>
                    <p v-else>第{{item.grade}}轮</p>
                  </el-col>
                  <el-col :span="2" class="logo">
                     <e-img-match :src="item.hostIconUrl"/>
                  </el-col>
                  <el-col :span="4">
                    <div class="team">
                      <div class="host tm-name">
                        <p>{{item.hostUserName + (item.hostUserName2? '&' + item.hostUserName2 : '') || '待定'}}
                          <span v-if="item.hostSeedValue && item.hostSeedValue!=10000" class="seed-number inner">{{item.hostSeedValue}}</span>
                        </p>
                        <template v-if="item.status==6 && Number(item.homeScore)==0">
                          <div class="giveup">已弃权</div>
                        </template>                          
                        <el-button type="link" 
                          v-if="item.hostUserName && (!item.homeScore) && item.status!==4 && item.status!==6"
                          @click="giveUp($event, item,'host')">弃权</el-button>
                      </div>
                    </div>
                  </el-col>                  
                  <el-col :span="3">
                    <div class="match-vs">
                      <p v-if="!item.homeScore && (!item.guestScore)" class="match-vers">vs</p>
                      <p v-if="item.end|| item.guestScore" class="match-vers">{{item.homeScore}}:{{item.guestScore}}</p>
                      <template v-if="isGroup || isDouble || hasScoreDetail">
                        <el-button type="link" v-if="!item.homeScore && [4,5,6].indexOf(item.status)== -1 &&item.hostUserId && item.guestUserId" 
                          @click="openScore(item)">
                          录入比分
                        </el-button>
                      </template> 
                      <template v-else>
                        <el-button type="link" 
                          v-if="item.status!==4 && item.status!==6 &&item.hostUserId && item.guestUserId" 
                          @click="openScore(item)">
                          {{(item.homeScore.length||item.guestScore.length) ? '修改比分': '录入比分'}}
                        </el-button>
                      </template>                                           
                    </div>
                  </el-col>
                  <el-col :span="2"  class="logo">
                      <e-img-match :src="item.guestIconUrl" />
                  </el-col>
                  <el-col :span="4">
                    <div class="team">
                      <div class="tm-name">
                        <p>{{item.guestUserName + (item.guestUserName2? '&' + item.guestUserName2 : '') || '待定'}}
                          <span class="seed-number inner" v-if="item.guestSeedValue && item.guestSeedValue!=10000">{{item.guestSeedValue}}</span>
                        </p>
                        <template v-if="item.status==6 && item.guestScore==0">
                          <div class="giveup">已弃权</div>
                        </template> 
                        <el-button v-if="item.guestUserName && (!item.homeScore) && item.status!==4 && item.status!==6" 
                          type="link"  @click="giveUp($event, item,'guest')">弃权</el-button>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <!--status: 0、初始化（2轮以上赛事默认使用），1、待比赛，2、已结束，3、延迟比赛，4、取消比赛，5轮空-->
                    <div v-if="item.status!==4 &&  item.status!==6 && item.status !=2">
                      <el-button v-show="!item.homeScore" class="tiny" size="mini" @click="editGame(item)">编辑比赛</el-button>
                      <el-button v-show="!item.homeScore && (playRound - item.grade) > 1" class="tiny" size="mini" @click="showCancel(item)">取消比赛</el-button>                                          
                    </div>
                    <div v-if="item.status==4">
                      <span  class="canceled">已取消</span>
                    </div>
                    <div v-if="item.status==6">
                      <template v-if="item.remark">
                        <span class="canceled">{{item.remark}}</span>
                      </template>
                      <template v-else>
                        <span class="canceled" v-if="item.homeScore==0">主队弃权</span>
                        <span class="canceled" v-if="item.guestScore==0">客队弃权</span>
                      </template>                      
                    </div>
                    <div v-if="item.status==2 && isGroup">
                      <el-button size="small" @click="lookDetails(item)">
                        查看比分详情
                      </el-button>
                    </div>
                    <div v-if="item.status==2 && hasScoreDetail">
                      <el-button size="small" @click="getScoreDetail(item)">
                        查看比分详情
                      </el-button>
                    </div>
                  </el-col>
                </el-row>                
            </li>
           </ul>
           <div class="button-box">
             <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
           </div>
        </div>

        <div class="no-match" v-else>没有比赛</div>


      <!--录入大比分弹框-->
      <el-dialog
        class="score-dialog"
        :visible.sync="scoreVisible"
        :title="'请输入最终比分'"
        @close="closeScore()">
        <div class="relative">
          <div style="margin-bottom:10px;">
            <span class="game-name hidden">{{game.hostUserName + (game.hostUserName2 ? '&' + game.hostUserName2 : '')}}</span>
            <el-input class="score-input" v-model.trim="homeScore" :maxlength="3"  v-on:keydown.native="handleKeyDown($event)">
              <template slot="append">分</template>
            </el-input>
          </div>
          <div>
            <span class="game-name hidden">{{game.guestUserName + (game.guestUserName2 ? '&' + game.guestUserName2 : '')}}</span>
            <el-input class="score-input" v-model.trim="guestScore" :maxlength="3" v-on:keydown.native="handleKeyDown($event)">
              <template slot="append">分</template>
            </el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeScore()">取 消</el-button>
          <el-button type="primary" @click="scoreWrite()">确 定</el-button>
        </span>  
      </el-dialog>
      
      

      <!-- 取消比赛弹框 --> 
      <cancel-game-dialog
        v-if="cancelVisible"
        :visible.sync="cancelVisible"
        @close="hideMessageBox"
        @cancel="hideMessageBox"
        @confirm="cancelGame">
      </cancel-game-dialog>
      <!--团体小比分弹框-->
      <score-group
        v-if="scoreGroupVisible"
        :visible="scoreGroupVisible"
        :data="match"
        :detail="scoreGroup"
        :isRead="isRead"
        @close="scoreGroupVisible=false"
        @score="handleScore">
      </score-group>

      <!--小比分弹框--> 
      <score-dialog
        v-if="scoreDetailsVisible"
        :isRead="isReadScore"
        :visible="scoreDetailsVisible"
        :data="scoreDetail"
        :result="scoreResult"
        :host="game.hostUserName + (game.hostUserName2 ? '&'+game.hostUserName2 : '')"
        :guest="game.guestUserName + (game.guestUserName2 ? '&'+game.guestUserName2 : '')"
        @score="score"
        @close="scoreDetailsVisible=false">
      </score-dialog>
  </div>
</template>

<script>
import Api from 'api/race'
import CheckTable from './components/CheckTable'
import Semifinal from './components/Semifinal'
import DateSlider from './components/DateSlider'
import PlaceGroup from './components/PlaceGroup'
import CancelGameDialog from './components/CancelGameDialog.vue'
import ScoreGroup from './components/ScoreGroup'
import ScoreDialog from './components/ScoreDialog'
import {calcRound, downloadFile, groupRaceFormat, seqList, matchFormat, IsScoreDetail} from 'utils'
import {mapGetters} from 'vuex'
export default {
  components: {
    Semifinal,
    CheckTable,
    DateSlider,
    PlaceGroup,
    CancelGameDialog,
    ScoreGroup,
    ScoreDialog
  },
  computed: {
    ...mapGetters({
      race_detail: 'race_detail'
    }),
    isGroup () {
      return [300501, 300401, 300301].indexOf(this.race_detail.matchType) > -1
    },
    isDouble () {
      return [20006, 20008, 20010].indexOf(this.race_detail.joinRequire) > -1
    },
    hasScoreDetail () {
      return IsScoreDetail(this.race_detail)
    }
  },
  created () {
    this.getDrawData()
    this.getPreview()
  },
  data () {
    return {
      scoreDetailsVisible: false,
      scoreDetail: {},
      scoreResult: {},
      isReadScore: false,
      isRead: false,
      scoreGroup: {},
      scoreGroupVisible: false,
      isSemifinal: false,
      scoreVisible: false,
      cancelVisible: false,
      bigTableVisible: false,
      canceledGame: {},
      playRound: 2,
      game: {},
      homeScore: '',
      guestScore: '',
      dataList: [], // 展示的签表
      areaIndex: 0, // 分区展示的id
      roundList: [], // 轮次标题列表
      dateList: [], // 日期列表
      gameList: [], // 比赛对阵列表
      matchList: [], // 比赛场地编号
      semiList: [], // 半决赛对阵列表
      checkTableList: [], // 总的签表列表
      activeDate: {}, // 当前日期
      selectedIndex: 0, // 场地编号选中索引
      match: {}
    }
  },
  methods: {
    // 日期选择事件
    handleCheck (obj) {
      if (obj.matchNumber > 0) {
        this.getScheduleInfo(obj.scheduleDate)
        this.selectedIndex = 0
      } else {
        this.gameList = []
        this.matchList = []
      }
    },
    // 获取赛程预览导航栏
    getPreview () {
      Api.getSchedulePreview({matchId: this.$route.query.id}, this).then((data) => {
        this.dateList = data.data || []
        if (this.dateList.length) {
          this.activeDate = this.dateList[0]
          this.getScheduleInfo(this.activeDate.scheduleDate)
          this.selectedIndex = 0
        }
      })
    },
    // 获取某一天的赛程信息
    getScheduleInfo (date) {
      Api.getScheduleInfo({
        matchId: this.$route.query.id,
        day: date
      }, this).then((data) => {
        this.matchList = data.data
        this.gameList = this.matchList[this.selectedIndex].matchScheduleResp
      })
    },
    hideMessageBox () {
      this.cancelVisible = false
    },
    // 弹出取消比赛弹框
    showCancel (item) {
      this.canceledGame = item
      this.cancelVisible = true
    },
    // 计算有多少轮
    calcRound () {
      this.roundList = calcRound(this.playRound)
    },
    // 选中分区tab事件
    handleActive (index) {
      this.areaIndex = index
      this.dataList = this.checkTableList[index].grades
      this.handleSort()
    },
    // 打开录入比分弹框
    openScore (item) {
      if (this.isGroup) {
        if (!item.sequence) {
          Api.getSequence({
            matchId: this.$route.query.id,
            matchScheduleId: item.id
          }).then((res) => {
            item.sequence = seqList(res.data)
            this.match = Object.assign({}, {id: item.id, sequence: item.sequence, hostTeam: item.hostUserName, guestTeam: item.guestUserName}, groupRaceFormat(this.race_detail))
            this.scoreGroupVisible = true
          })
        } else {
          this.match = Object.assign({}, {id: item.id, sequence: item.sequence, hostTeam: item.hostUserName, guestTeam: item.guestUserName}, groupRaceFormat(this.race_detail))
          this.scoreGroupVisible = true
        }
        this.isRead = false
      } else {
        if (this.hasScoreDetail) { // 录入小比分
          this.isReadScore = false
          this.scoreDetail = matchFormat(this.race_detail)
          this.scoreDetailsVisible = true
        } else {
          this.scoreVisible = true
        }
      }
      this.game = item
    },
    // 关闭弹框并重置主队客队比分
    closeScore () {
      this.scoreVisible = false
      this.homeScore = ''
      this.guestScore = ''
    },
    // 比分录入
    scoreWrite () {
      if ((Number.isInteger(parseInt(this.homeScore))) && (Number.isInteger(parseInt(this.guestScore))) &&
        parseInt(this.homeScore) !== parseInt(this.guestScore) &&
        parseInt(this.homeScore) >= 0 && parseInt(this.guestScore) >= 0) {
        Api.scoreWrite({
          id: this.game.id,
          hostScores: this.homeScore,
          guestScores: this.guestScore
        }, {context: event.target}).then((res) => {
          this.game.homeScore = this.homeScore
          this.game.guestScore = this.guestScore
          this.getDrawData()
          let theday = new Date(this.game.startTime).format('yyyy-MM-dd')
          this.getScheduleInfo(theday)
          for (var i = 0, l = this.dateList.length; i < l; i++) {
            if (this.dateList[i].scheduleDate === theday) {
              this.activeDate = this.dateList[i]
            }
          }
          this.closeScore()
        }).catch((err) => {
          console.log(err.msg)
        })
      } else {
        this.$message({
          type: 'error',
          message: '比分请输入非负整数,且不能为平局'
        })
        return false
      }
    },
    // 场地tab切换
    handleSelect (index) {
      this.selectedIndex = index
      this.gameList = this.matchList[index].matchScheduleResp
    },
    // 获取签表数据
    getDrawData () {
      Api.getDrawData({matchId: this.$route.query.id}).then((res) => {
        this.zoneNumber = res.data.length
        if (this.zoneNumber > 1) { // 有分区,球队>=32
          this.checkTableList = res.data
          if (res.data[4]) {
            this.playRound = res.data[4].grades[1].grade
            this.semiList = res.data[4].grades
          }
        } else {
          this.playRound = res.data[0].grades.length
          if (this.playRound === 2) { // 4支
            this.semiList = res.data[0].grades
            this.isSemifinal = true
          }
          if (this.playRound === 3) { // 8支
            this.isSemifinal = false
          }
          if (this.playRound === 4) { // 16支
            this.semiList = res.data[0].grades.filter(item => {
              return item.grade > 2
            })
          }
        }
        this.bigTableVisible = this.playRound > 2
        this.dataList = res.data[this.areaIndex].grades
        this.handleSort()
        this.calcRound()
      })
    },
    // 比赛弃权
    giveUp (event, item, team) {
      let isHost = team === 'host' ? 1 : 0
      let text = ''
      if (isHost) {
        text = '主队：' + item.hostUserName + (item.hostUserName2 ? '&' + item.hostUserName2 : '')
      } else {
        text = '客队：' + item.guestUserName + (item.guestUserName2 ? '&' + item.guestUserName2 : '')
      }
      this.$confirm(`确认 ${text}弃权？`, '提示', {
        type: 'warning'
      }).then(() => {
        Api.matchGiveup({
          id: item.id,
          hostUserId: item.hostUserId,
          guestUserId: item.guestUserId,
          status: 6, // 4：取消比赛，5：轮空，6：弃权
          result: isHost ? 3 : 4 // 3：主队弃权，4：客队弃权
        }, {context: event.target}).then((res) => {
          item.end = 1
          item.status = 6
          item.homeScore = res.data.hostScore
          item.guestScore = res.data.guestScore
          this.getDrawData()
        }).catch((err) => {
          this.$message({
            type: 'warning',
            message: err.msg
          })
        })
      })
    },
    // 取消比赛
    cancelGame (obj) {
      Api.matchCancel({
        id: this.canceledGame.id,
        cancleCase: obj.cancelCase,
        remark: obj.remark
      }, {context: this}).then((res) => {
        this.canceledGame.status = 4
        this.$message({
          type: 'success',
          message: '取消成功!'
        })
        this.hideMessageBox()
        let ind = this.dateList.indexOf(this.activeDate)
        if (ind >= 0) {
          this.dateList[ind].matchNumber--
        }
        this.getPreview()
        this.getDrawData()
      }).catch((err) => {
        this.$message({
          type: 'warning',
          message: err.msg
        })
        this.hideMessageBox()
      })
    },
    // 进入编辑比赛页面
    editGame (item) {
      if (!item.hostUserName) {
        item.hostUserName = '待定'
      }
      if (!item.guestUserName) {
        item.guestUserName = '待定'
      }
      this.$store.commit('MATCH_DETAIL', item)
      this.$router.push({
        path: '/race/detail/manage/matchedit',
        query: {
          id: this.$route.query.id,
          gameId: item.id,
          isRun: this.$route.query.isRun,
          tasktype: this.$route.query.tasktype
        }
      })
    },
    exportExcel () {
      var url = '/api/match/schedule/export/schedulePrevInfo?matchId=' + this.$route.query.id // + '&day=' + this.activeDate.scheduleDate
      var _this = this
      downloadFile(url, this.race_detail.matchName + '.xls', function (blob) {
        _this.$message({
          message: '下载出错，请稍后再试',
          type: 'warning'
        })
      })
    },
    handleSort () {
      this.dataList.sort(function (a, b) {
        return a.grade - b.grade
      })
    },
    // 录入团体比分
    handleScore (data) {
      Api.score(data).then((res) => {
        this.scoreGroupVisible = false
        this.getScheduleInfo(this.activeDate.scheduleDate)
        this.getDrawData()
      })
    },
    // 查看团体赛事小比分
    lookDetails (item) {
      this.isRead = true
      if (item.scoreList) {
        this.scoreGroup = item.scoreList
        this.scoreGroupVisible = true
      } else {
        Api.getGroupScore({
          matchScheduleId: item.id
        }).then((res) => {
          let sg = {
            hostTeam: item.hostUserName,
            guestTeam: item.guestUserName,
            hostScore: res.data.hostScore,
            guestScore: res.data.guestScore,
            scoreList: res.data.mssvo
          }
          item.scoreList = Object.assign({}, groupRaceFormat(this.race_detail), sg)
          this.scoreGroup = item.scoreList
          this.scoreGroupVisible = true
        })
      }
    },
    // 录入小比分
    score (val) {
      Api.scoreDetail({
        id: this.game.id,
        hostScore: val.hostScore,
        guestScore: val.guestScore,
        hostUserId: this.game.hostUserId,
        guestUserId: this.game.guestUserId,
        roundType: String(this.race_detail.formatNumberType),
        scoreGameVO: val.scoreGameVO
      }, {context: event.target}).then((res) => {
        this.game.homeScore = this.homeScore
        this.game.guestScore = this.guestScore
        this.getDrawData()
        let theday = new Date(this.game.startTime).format('yyyy-MM-dd')
        this.getScheduleInfo(theday)
        for (var i = 0, l = this.dateList.length; i < l; i++) {
          if (this.dateList[i].scheduleDate === theday) {
            this.activeDate = this.dateList[i]
          }
        }
        this.scoreDetailsVisible = false
      }).catch((err) => {
        console.log(err.msg)
      })
    },
    // 查看个人赛小比分
    getScoreDetail (item) {
      this.isReadScore = true
      if (item.scoreList) {
        this.scoreResult = item.scoreList
        this.scoreDetailsVisible = true
      } else {
        Api.getScoreDetail({
          matchScheduleId: item.id
        }).then((res) => {
          let game = matchFormat(this.race_detail)
          item.scoreList = {
            roundType: game.roundType,
            scoreList: res.data.smallScoreScanVO || [],
            hostUserName: item.hostUserName + (item.hostUserName2 ? '&' + item.hostUserName2 : ''),
            guestUserName: item.guestUserName + (item.guestUserName2 ? '&' + item.guestUserName2 : ''),
            hostScore: res.data.hostScore,
            guestScore: res.data.guestScore,
            dish: game.dish
          }
          this.scoreResult = item.scoreList
          this.scoreDetailsVisible = true
        })
      }
    },
    handleKeyDown (e, isHost) {
      if (e.keyCode === 32) {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>

@import '../../styles/scheduleEdit.scss';
.title{
  small{
    font-size: 14px;
    color: #333;
    cursor: pointer;
    &.active{
      color:#00bb90;
    }
  }
}
p.score{
  font-size: 16px;
  color: #666;
}
.logo{
  text-align: right;
  img{
    margin:0;
  }
}
.cancel{
  line-height: 36px;
}
.champion:after{
  content:url('/static/images/champion.png');
}
.seed-number{
  width:20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #fd9a4c;
  color:#fff;
  display: inline-block;
  border-radius: 3px;
  font-size: 12px;
  position: absolute;
  left:-23px;
  &.inner{
    position: initial;
    padding: 0;
  }
}
</style>
<style lang="scss">
.normal-font{
  font-size:14px!important;
}
.score-dialog{
  .el-dialog{
    width: 420px;
    .el-dialog__body{
      text-align:center;
    }
  }
}
.score-input{
  display: inline-block;
}
</style>
